﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>todoList</title>
        <link rel="stylesheet" href="/public/css/base.css" />
        <link rel="stylesheet" href="/public/css/index.css" />
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <section class="todoapp" v-cloak>
            <div>
                <header class="header" >
                    <h1>todoList</h1>
                    <input class="new-todo" placeholder="请输入内容" v-model="title" @keyup.enter="addTask()" />
                </header>
                <section class="main">
                    <ul class="todo-list">
                        <li v-for="item in todos" :key="item.ID">
                            <div class="view">
                                <input class="toggle" type="checkbox" @click.prevent="changeTask(item.ID)" :checked="item.done" />
                                <label>{{ item.title }}</label>
                                <button class="destroy" @click="deleteTask(item.ID)"></button>
                            </div>
                            <input class="edit" />
                        </li>
                    </ul>
                </section>
                <footer class="footer">
                    <span class="todo-count">
                        <strong>12</strong>
                        <span>条未选中</span>
                    </span>
                    <ul class="filters">
                        <li>
                            <a href="javascript:;">全部</a>
                        </li> 
                        <li>
                            <a href="javascript:;">未完成</a>
                        </li> 
                        <li>
                            <a href="javascript:;">已完成</a>
                        </li>
                    </ul>
                </footer>
            </div>
        </section>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
           let vm = new Vue({
                created () {
                    this.getTaskList();
                },
                data: {
                    todos: [],
                    title: ''
                },
                methods: {
                    async getTaskList() {
                        let res = await fetch('/task/query');

                        let data = await res.json();

                        if(!data.code) {
                            this.todos = data.data;
                        } else {
                            alert(data.msg);
                        }
                    },
                    async addTask() {
                        let res = await fetch('/task/add', {
                            method: 'POST',
                            headers: {
                        　　　　'Content-Type': 'application/json; charset=utf-8'
                        　　},
                            body: JSON.stringify({ title: this.title })
                        });

                        let data = await res.json();

                        if(!data.code) {
                            alert('恭喜，' + data.msg);
                            console.log(data.data);
                            this.todos.unshift(data.data);
                            this.title = '';
                        } else {
                            alert(data.msg);
                        }
                    },
                    async changeTask(id) {
                        let res = await fetch('/task/update', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json; charset=utf-8'
                            },
                            body: JSON.stringify({ id })
                        });

                        let data = await res.json();

                        if(!data.code) {
                            alert('恭喜，' + data.msg);
                            let todo = this.todos.find(item => item.ID == id);
                            todo.done = data.data.done;
                        } else {
                            alert(data.msg);
                        }
                    },
                    async deleteTask(id) {
                        let res = await fetch('/task/delete', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json; charset=utf-8'
                            },
                            body: JSON.stringify({ id })
                        });

                        let data = await res.json();

                        if(!data.code) {
                            alert('恭喜，' + data.msg);
                            // this.todos = this.todos.filter(item => item.ID != id);
                            this.todos = data.data;
                        } else {
                            alert(data.msg);
                        }
                    }
                }
           }).$mount('.todoapp');
        </script>
    </body>
</html>
